<template>
  <div class="page-tabbar">
    <div class="page-wrap">
      <mt-tab-container class="page-tabbar-container" v-model="selected">
        <mt-tab-container-item id="input">
          <el-table
            :data="inputDatas"
            height="1000"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="备注: ">
                    <span>{{ props.row.comment }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              label="日期"
              width="150">
            </el-table-column>
            <el-table-column
              prop="breastMilk"
              label="母乳">
            </el-table-column>
            <el-table-column
              prop="dryMilk"
              label="配方奶">
            </el-table-column>
            <el-table-column 
              label="操作"
              width="90">
              <template slot-scope="props">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleInputDataDelete(props.row)"
                  icon="el-icon-delete" circle/>
              </template>
            </el-table-column>
          </el-table>
        </mt-tab-container-item>
        <mt-tab-container-item id="output">
          <el-table
            :data="outputDatas"
            height="1000"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="备注: ">
                    <span>{{ props.row.comment }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              label="日期"
              width="150">
            </el-table-column>
            <el-table-column
              prop="urinate"
              label="小便">
            </el-table-column>
            <el-table-column
              prop="stool"
              label="大便">
            </el-table-column>
            <el-table-column 
              label="操作"
              width="90">
              <template slot-scope="props">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleOutputDataDelete(props.row)"
                  icon="el-icon-delete" circle/>
              </template>
            </el-table-column>
          </el-table>
        </mt-tab-container-item>

        <mt-tab-container-item id="test">
          <babyinput/>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>

    <el-dialog :title='currentDate' :visible.sync="inputDataDialogFormVisible">
      <el-form>
        <mt-field label="日期" placeholder="输入日期" type="time" v-model='inputData.time'></mt-field>
        <mt-field label="母乳" placeholder="输入母乳量" type="number" v-model='inputData.breastMilk'></mt-field>
        <mt-field label="配方奶" placeholder="输入配方奶量" type="number" v-model='inputData.dryMilk'></mt-field>
        <mt-field label="备注" placeholder="输入备注信息" type="text" v-model='inputData.comment'></mt-field>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="inputDataDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveInputData">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title='currentDate' :visible.sync="outputDataDialogFormVisible">
      <el-form>
        <mt-field label="日期" placeholder="输入日期" type="time" v-model='outputData.time'></mt-field>
        <mt-field label="小便" placeholder="输入小便" type="number" v-model='outputData.urinate'></mt-field>
        <mt-field label="大便" placeholder="输入大便" type="number" v-model='outputData.stool'></mt-field>
        <mt-field label="备注" placeholder="输入备注信息" type="text" v-model='outputData.comment'></mt-field>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="outputDataDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOutputData">确 定</el-button>
      </div>
    </el-dialog>

    <floatBall :text="'+'" @click.native="show"></floatBall>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="input">
        <img slot="icon" src="../assets/baby-drinking-bottle.png">
        吃
      </mt-tab-item>
      <mt-tab-item id="output">
        <img slot="icon" src="../assets/baby-boy.png">
        拉
      </mt-tab-item>
      <mt-tab-item id="test">
        Test
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import floatBall from '@/common/FloatBall';
import babyinput from '@/components/BabyInput'
import { Toast } from 'mint-ui';

Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "H+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

export default {
  name: 'BabyGrowthRecord',
  components:{
    floatBall,
    babyinput
  },
  mounted: function () {
    this.loadBabyInputDatas()
    this.loadBabyOutputDatas()      
  },

  methods: {
    loadBabyInputDatas() {
      var _this = this
      this.$axios.get('/babyinputtodaydatas').then(resp => {
        if (resp && resp.status === 200) {
          _this.inputDatas = []
          resp.data.forEach(d => {
            _this.inputDatas.push({
              id: d.id,
              date: new Date(d.date).Format("yyyy/MM/dd HH:mm"),
              breastMilk: d.breastMilk,
              dryMilk: d.dryMilk,
              comment: d.comment
            })
          });
        }
      })
    },
    loadBabyOutputDatas() {
      var _this = this
      this.$axios.get('/babytodayoutputdatas').then(resp => {
        if (resp && resp.status === 200) {
          _this.outputDatas = []
          resp.data.forEach(d => {
            _this.outputDatas.push({
              id: d.id,
              date: new Date(d.date).Format("yyyy/MM/dd HH:mm"),
              urinate: d.urinate ? 1 : 0,
              stool: d.stool ? 1 : 0,
              comment: d.comment
            })
          });
        }
      })
    },
    show() {
      if(this.selected == 'input') {
        this.inputData.time = new Date().Format("HH:mm")
        this.inputData.breastMilk = ''
        this.inputData.dryMilk = ''
        this.inputData.comment = ''

        this.inputDataDialogFormVisible = true;
      }
      else if(this.selected == 'output') {
        this.outputData.time = new Date().Format("HH:mm")
        this.outputData.urinate = ''
        this.outputData.stool = ''
        this.outputData.comment = ''

        this.outputDataDialogFormVisible = true;
      }
    },
    closeInputDataDialog() {
      inputDataDialogFormVisible = false;
    },
    saveInputData() {
          this.$axios
          .post('/babyinputdata', {
            id: this.inputData.id,
            date: new Date(this.currentDate + " " + this.inputData.time),
            breastMilk: this.inputData.breastMilk,
            dryMilk: this.inputData.dryMilk,
            comment: this.inputData.comment

          }).then(resp => {
          if (resp && resp.status === 200) {
            this.inputDataDialogFormVisible = false
            this.loadBabyInputDatas()
          }
        })
    },
    saveOutputData() {
          this.$axios
          .post('/babyoutputdata', {
            id: this.outputData.id,
            date: new Date(this.currentDate + " " + this.outputData.time),
            urinate: this.outputData.urinate == 1 ? true : false,
            stool: this.outputData.stool == 1 ? true : false,
            comment: this.outputData.comment

          }).then(resp => {
          if (resp && resp.status === 200) {
            this.outputDataDialogFormVisible = false
            this.loadBabyOutputDatas()
          }
        })
    },
    handleEdit(row) {
      this.inputData.id = row.id
      this.inputData.time = new Date(row.date).Format("HH:mm")
      this.inputData.breastMilk = row.breastMilk
      this.inputData.dryMilk = row.dryMilk
      this.inputData.comment = row.comment

      this.inputDataDialogFormVisible = true;
    },
    handleInputDataDelete(row) {
      this.$axios
          .post('/babyinputdata/delete', {
            id: row.id
          }).then(resp => {
          if (resp && resp.status === 200) {
            this.loadBabyInputDatas()
            Toast({
              message: '刪除成功',
              iconClass: 'mintui mintui-success'
            });
            
          }
        })
    },
    handleOutputDataDelete(row) {
      this.$axios
          .post('/babyoutputdata/delete', {
            id: row.id
          }).then(resp => {
          if (resp && resp.status === 200) {
            this.loadBabyOutputDatas()
            Toast({
              message: '刪除成功',
              iconClass: 'mintui mintui-success'
            });
            
          }
        })
    }
  },
  data() {
    return {
      selected: 'input',
      inputDataDialogFormVisible: false,
      outputDataDialogFormVisible: false,
      currentDate: new Date().Format("yyyy-MM-dd"),
      inputDatas: [],
      inputData: {},
      outputDatas: [],
      outputData: {}
    };
  }
};
</script>

<style>
  .el-dialog {
    width: 90%;
    height: 50%;
  }
</style>